<meta name="referrer" content="never">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    #replyDetail {
        background: #fff;
        border-radius: 6px;
        font-size: 14px;
        padding: 0 20px 20px;
        color: #444;
    }

    .btn-common {
        line-height: 32px;
        height: 32px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination {
        margin: 0;
    }

    [v-cloak] {
        display: none
    }

    .goods-detail-table {
        border: 1px solid #E6E6E6;
        border-bottom: none;
        margin-bottom: 20px;
    }

    .goods-detail-item {
        border-bottom: 1px solid #E6E6E6;
    }

    .goods-detail-item>div {
        padding: 5px 10px;
    }

    .goods-detail-name {
        width: 120px;
    }

    .goods-detail-msg {
        width: 378px;
    }

    .goods-detail-del,
    .goods-detail-move {
        width: 50px;
        display: flex;
        justify-content: center;
    }

    .goods-detail-del-icon {
        color: #ff5959;
    }

    .create-goods,
    .add-params,
    .add-level1-sku {
        width: 98px;
        background: #7536D0;
        color: #fff;
    }

    .create-goods span,
    .add-params span,
    .add-level1-sku span {
        margin-left: 8px;
    }

    .goods-name {
        display: flex;
        align-items: center;
    }

    .goods-img {
        width: 34px;
        height: 34px;
        margin-right: 10px;
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>

<div id="replyDetail" v-cloak>
    <el-form :model="detailForm" ref="detailForm" :rules="ruleForm" label-width="100px" class="demo-detailForm">
        <el-form-item label="模板名称：" prop="name">
            <el-input v-model="detailForm.name" placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item label="模板id：" prop="template_id">
            <el-input v-model="detailForm.template_id" placeholder="请输入模板id"></el-input>
        </el-form-item>
        <el-form-item label="模板内容：" prop="content">
            <el-input type="textarea" v-model="detailForm.content" placeholder="请输入模板内容">
            </el-input>
        </el-form-item>
        <el-form-item label="参数详情：">
            <div>
                <div class="goods-detail-table">
                    <div class="display-flex goods-detail-item">
                        <div class="goods-detail-name">
                            参数名称
                        </div>
                        <div class="goods-detail-msg">
                            内容
                        </div>
                        <div class="goods-detail-del">
                            删除
                        </div>
                        <div class="goods-detail-move">
                            移动
                        </div>
                    </div>
                    <draggable :list="detailForm.params_arr" v-bind="$attrs" :options="{animation:500}">
                        <div class="display-flex goods-detail-item" v-for="(it,index) in detailForm.params_arr">
                            <div class="goods-detail-name">
                                <el-input type="input" v-model="it.title" style="width:90px" size="small">
                                </el-input>
                            </div>
                            <div class="goods-detail-msg">
                                <el-input type="input" v-model="it.content" style="width:348px" size="small">
                                </el-input>
                            </div>
                            <div class="goods-detail-del">
                                <div class="goods-detail-del-icon" @click="delParams(index)">
                                    删除
                                </div>
                            </div>
                        </div>
                    </draggable>
                </div>
                <div class="btn-common add-params" @click="addParams">
                    <i class="el-icon-plus"></i>
                    <span>添加参数</span>
                </div>
            </div>
        </el-form-item>
        <el-form-item label="指定用户" prop="user_ids" style="height: auto;">
            <div class="display-flex">
                <div class="user-container">
                    <el-select style="position: relative;" v-model="detailForm.user_ids" multiple filterable
                        placeholder="" :filter-method="dataFilter">
                        <el-option v-for="item in aboutUserOptions" :key="item.nickname" :label="item.nickname"
                            :value="item.id">
                            <div class="display-flex" style="justify-content: space-around;">
                                <span>{{ item.id }}</span>
                                <img style="width:24px;
                                                height:24px;
                                                border-radius:50%;" :src="Fast.api.cdnurl(item.avatar)" alt=""
                                    srcset="">
                                <div style="width: 80px;">{{ item.nickname }}</div>
                                <div style="width: 90px;">
                                    <div style="width: 90px;" v-if="item.mobile">{{ item.mobile }}</div>
                                    <div style="width: 90px;text-align: center;" v-else>-</div>
                                </div>
                            </div>
                        </el-option>
                        <div class="text-center" style="position: sticky;background: #fff;height:28px;top:0;z-index:1">
                            <div class="text-normal display-flex" style="justify-content: center;">
                                <el-pagination class="pagination" :page-sizes="[6]" :current-page="currentPage"
                                    :total="totalPage" layout="total, sizes, prev, pager,next, jumper" pager-count="5"
                                    @size-change.stop="pageSizeChange" @current-change="pageCurrentChange" />
                                </el-pagination>
                                <div style="cursor: pointer;color: #7438D5;margin-left: 8px;" @click="getUser">跳转
                                </div>
                            </div>
                        </div>
                    </el-select>
                </div>
                <div class="form-tip">默认不选就是向所有会员发送消息</div>
            </div>
        </el-form-item>
    </el-form>
    <div class="dialog-footer display-flex">
        <div @click="dispatchSub" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
        <div @click="dispatchSub('yes','detailForm')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
    </div>
</div>